<template>
    <head-bar></head-bar>
    <div class="mainContent" ref="contentRef">
        <div><router-view  @refreshContent="refreshOb"></router-view></div>
    </div>
    <back-btn></back-btn>
</template>
<script setup>
import { ref,onMounted, nextTick,provide} from 'vue'
import HeadBar from '@/components/layout/headBar.vue';
import backBtn from '@/components/layout/backBtn.vue'

import { useStore } from '@/store/index.js'
import { getMoreListData } from '@/api'


// 滚动相关 - better-scroll
import BScroll from '@better-scroll/core'
import Pullup from '@better-scroll/pull-up'
import PullDown from '@better-scroll/pull-down'
import MouseWheel from '@better-scroll/mouse-wheel' 
BScroll.use(Pullup)
BScroll.use(PullDown)
BScroll.use(MouseWheel)
// end

const contentRef = ref(null)
const showBack = ref(false)
provide('status',{
    showBack
})
const store = useStore()


let ob;
onMounted(()=>{
    nextTick(()=>{
        ob = new BScroll(contentRef.value,{
            click : true,
            probeType: 3,
            pullUpLoad : {
                threshold : 200
            },

            pullDownRefresh: {
                threshold: 70,
                stop: 0
            },
            mouseWheel : true,
        })
        ob.on('scrollStart',()=>{
            console.log('开始滚动')
            showBack.value = false;

        })
        ob.on('scrollEnd',()=>{
            console.log('结束')
            setTimeout(() => {
                showBack.value = true;
            }, 1000);
        })
        ob.on('pullingUp',async () => {
            console.log('上拉')
            const { curTitle, lastId } = store
            let res = await getMoreListData(curTitle,lastId.id)
            if(res.status == 200){
                store.setDataList(res.data.data)
                store.setLastId(res.data.data.slice(-1)[0])
            }
            else{
                //  error to do...
            }
            ob.finishPullUp()
            ob.refresh()
        })
    })
    
})

const refreshOb = (t) => {
    nextTick(()=>{
        ob && ob.refresh()
    })
}



</script>

<style lang="scss" scoped>
    .mainContent{
        width: 100%;
        height: calc(100% - $NAVBAR_HEIGHT);
        position: absolute;
        top: $NAVBAR_HEIGHT;
        background-color: white;
    }
</style>